<?php echo $this->render('/public/header'); ?>
    <link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.0.11/index.js"></script>
    <style>
        input[type=file] {
            display: none
        }

        ;
    </style>
    <div id="main" class="col-lg-12">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active" onclick="show(this,0)"><a href="#">个人信息</a></li>
            <li role="presentation" onclick="show(this,1)"><a href="#">修改密码</a></li>
        </ul>
        <div id="content">
            <div class="col-lg-6">
                <div class="form-group">
                    <label for="wechat">wechat</label>
                    <input type="text" required class="form-control" v-model="wechat">
                </div>
                <div class="form-group">
                    <label for="wechat">skype</label>
                    <input type="text" required class="form-control" v-model="skype">
                </div>
                <div class="form-group">
                    <label for="wechat">头像</label>
                    <el-upload class="upload-demo"
                               action="/table/upload-img"
                               name="img"
                               :on-success="handlerSuccess"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div>
                <button class="btn btn-success" @click="handlerUpload">确认更新</button>
            </div>
            <div class="col-lg-3" style="display: none">
                <h1>修改密码</h1>
                <form onsubmit="return update_pd()">
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" required class="form-control" id="password1"/>
                    </div>
                    <div class="form-group">
                        <label>再次输入密码</label>
                        <input type="password" required class="form-control" id="password2"/>
                    </div>
                    <button class="btn btn-success">确认</button>
                </form>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#main",
            data: {
                wechat: '',
                skype: '',
                avatar: ''
            },
            methods: {
                handlerSuccess: function(v){
                    this.avatar = v.msg;
                },
                handlerUpload: function () {
                    console.log(this.avatar);
                    const data = {};
                    data.wechat = this.wechat;
                    data.skype = this.skype;
                    data.avatar = this.avatar;
                    console.log(data);
                    $.post('/setting/staff-edit', data, function (res) {
                        if (res.code == 1) {
                            alert('添加成功');
                        }
                        else {
                            alert(res.msg);
                        }
                    }, 'json')
                }
            }

        });

        function show(e, key) {
            $(e).siblings().removeClass('active');
            $(e).addClass('active');
            $("#content").children().hide();
            $($("#content").children()[key]).show();
        }

        function update_pd() {
            var password1 = $("#password1").val();
            var password2 = $("#password2").val();
            if (password2 != password1) {
                layer.alert('2次密码不一样');
            }
            $.post('/setting/update_pd', {password: password1}, function (res) {
                if (res.code == 1) {
                    layer.confirm(res.msg, {}, function () {
                        window.location.href = "/login";
                    })
                }
                else {
                    layer.alert(res.msg);
                }
            }, 'json');

            return false;
        }
    </script>
<?php echo $this->render('/public/footer'); ?>